<template>
  <div class="add">
    <el-button @click="dialogVisible = true">添加</el-button>
    <el-dialog
        title="添加"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        width="30%">
      <!--      渲染表单-->
      <el-form  :rules="rules" :model="dataStandardL" ref="dialogForm">
        <template v-for="(item, index) in tableHeadData" >
          <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && !item.addForm && !item.type" :key="index">
            <el-input v-model="dataStandardL[item.prop]"></el-input>
          </el-form-item>
          <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && !item.addForm && item.type === 'choose'" :key="index">
            <el-radio-group v-model="dataStandardL[item.prop]">
              <template v-for="(itemR, indexR) in item.radio">
                <el-radio :label="itemR.label" :key="indexR">{{itemR.name}}</el-radio >
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && !item.addForm && item.type === 'time'" :key="index">
            <el-date-picker
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间" v-model="dataStandardL[item.prop]"></el-date-picker>
          </el-form-item>
          <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && item.type === 'select'" :key="index">
            <el-select v-model="dataStandardL[item.prop]" placeholder="请选择">
              <el-option
                  v-for="i in selectList[item.prop]"
                  :key="i.id"
                  :label="i.name"
                  :value="i.id"
                  :disabled="i.name==='管理员'">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && item.type === 'img'" :key="index">
            <el-upload
                ref="upload"
                v-model="dataStandardL[item.prop]"
                class="avatar-uploader"
                action="/api/common/upload"
                :on-success="
        (response, file, fileList) => {
          return handleSuccess(response, file, fileList);
        }
      ">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-image
                style="width: 100px; height: 100px; margin-bottom:-4px"
                :src="`/api/common/download?name=${dataStandardL.img}`"
            ></el-image>
          </el-form-item>
          <el-form-item :label="item.label" :prop="item.prop" v-if="!item.form && item.type === 'text'" :key="index">
            <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入内容"
                v-model="dataStandardL[item.prop]">
            </el-input>
          </el-form-item>
        </template>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('dialogForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "DialogOne",
  props: {
    tableData: { // 父组件传递过来的表格数据
      type: Array,
      default: () => {
        return []
      }
    },
    rules: { // 父组件传递过来的表格数据
      default: () => {
        return []
      }
    },
    tableHeadData: { // 父组件传递过来的表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    dataStandard: {
      default: () => {
        return []
      }
    },
    selectList:{
      default: () => {
        return []
      }}
  },
  data() {
    return {
      dialogVisible: false,
      dataStandardL: this.dataStandard, // 保存结构数据
      rulesL: JSON.parse(JSON.stringify(this.rules))
    };
  },
  methods:{
    //提交数据
    submitForm(formName){
      // 为表单绑定验证功能
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$emit("update",this.dataStandardL)
          this.dataStandardL={brand_right:0}
          this.dialogVisible = false
        }
        else {
          this.$message.error("请完善信息")
        }
      });
    },
    handleSuccess(response, file, fileList, rowInfo) {
      console.log(response, file, fileList, rowInfo);
      this.dataStandardL.img = response.data
      this.$refs.upload.clearFiles();
    },
  }
}
</script>

<style scoped>
.add{
  float: right;width: 80px;height: 40px;
}
</style>